<template>
    <div>
        <div class="nav-wrap">
            <div class="topnav">
                <Breadcrumb>
                <Breadcrumb.Item style="font-size: 12px;">
                    首页
                </Breadcrumb.Item>
                <Breadcrumb.Item style="font-size: 12px;">
                    年度协议管理
                </Breadcrumb.Item>
                <Breadcrumb.Item style="font-size: 12px;">
                    年度协议管理
                </Breadcrumb.Item>
                <Breadcrumb.Item style="font-size: 12px;">
                    二级商协议
                </Breadcrumb.Item>
                <Breadcrumb.Item style="font-size: 12px;">
                    新增二级商协议
                </Breadcrumb.Item>
            </Breadcrumb>
            </div>
            <div class="bottomnav">
                新增二级商协议
            </div>
        </div>
        <div class="content-wrap">
            <div class="onecontent">
                <Divider dashed>
                    <div class="num-wrap">
                        <div class="dividernum">
                            1
                        </div>
                        <span>协议主题</span>
                    </div>
                </Divider>


                <div class="onecotent-middle">

                    <Form
                        style="width:100%"
                        :model="formState"
                        name="basic"
                        :label-col="{ span: 4 }"
                        :wrapper-col="{ span: 16 }"
                        autocomplete="off"
                        @finish="onFinish"
                        @finishFailed="onFinishFailed"
                        >
                            <div class="oneleft">
                                <Form.Item 
                                    style="maring-right:5px;"
                                    label="协议客户"
                                    name="agreedCustomers"
                                    :rules="[{ required: true, message: 'Please input your agreedCustomers!' }]"
                                >
                                    <div class="agreedCustomers-select">
                                        <Select v-model:value="formState.agreedCustomers"
                                        :options="options"
                                        style="width: 100px;margin-right: 20px;"
                                        @change="handleChange">
                                        
                                        </Select>
                                        <span>上海正也医药有限公司</span>
                                    
                                    </div>
                                    
                                </Form.Item>

                                <div class="formitem-wrap">
                                        <Form.Item 
                                            style="maring-right:100px;"
                                            label="购进指标"
                                            name="purchase"
                                        >   
                                                <Select v-model:value="formState.purchase"
                                                :options="options"
                                                style="width: 100px;margin-right: 20px;"
                                                @change="handleChange">
                                                
                                                </Select>
                                        </Form.Item>
                                        <div class="formitem-absolute">
                                            <Input style="width:250px" v-model:value="formState.purchaseinput" placeholder="输入金额数量" disabled></Input>
                                        </div>
                                    


                                    
                                
                                
                                
                                </div>


                                <div class="formitem-wrap">



                                    

                                    <Form.Item 
                                        style="maring-right:5px;"
                                        label="销售区域"
                                        name="salesArea"
                                    >
                                        <div class="agreedCustomers-select">

                                            <Select v-model:value="formState.salesArea"
                                                :options="options"
                                                style="width: 100px;"
                                                @change="handleChange">
                                            
                                            </Select>
                                        </div>
                                        
                                    </Form.Item>
                                    <div class="formitem-absolute">
                                        <Input style="width:100px;margin-right:20px" v-model:value="formState.salesAreainput"  placeholder="选择区域" disabled></Input>
                                    </div>

                                   
                                </div>


                                <div class="formitem-wrap">
                                    <Form.Item 
                                        style="maring-right:5px;"
                                        label="购买渠道"
                                        name="channels"
                                    >
                                        <div class="agreedCustomers-select">
                                            <Select v-model:value="formState.channels"
                                            :options="options"
                                            style="width: 100px;margin-right: 20px;"
                                            @change="handleChange">
                                            
                                            </Select>

                                        </div>
                                        
                                    </Form.Item>
                                    
                                    <div class="formitem-absolute">
                                        <Input style="width:100px;margin-right:20px" v-model:value="formState.channelsinput"  placeholder="请选择渠道" disabled></Input>
                                    </div>
                                </div>
                            </div>


                            <div class="oneright">

                                <Form.Item 
                                    style="maring-right:5px;"
                                    label="协议状态"
                                    name="agreedState"
                                >
                                    <div class="agreedCustomers-select">
                                        <Select v-model:value="formState.agreedState"
                                        :options="options"
                                        style="width: 100px;"
                                        @change="handleChange">
                                        
                                        </Select>
                                    </div>
                                    
                                </Form.Item>


                                <div class="formitem-wrap">
                                    
                                    <Form.Item 
                                        style="maring-right:5px;"
                                        label="纯销指标"
                                        name="pureSales"
                                    >
                                        <div class="agreedCustomers-select">
                                            <Input style="width:100px;margin-right: 10px;" v-model:value="formState.pureSales" placeholder="金额" disabled></Input>


                                        </div>
                                        
                                    </Form.Item>
                                    

                                    <div class="formitem-absolute">
                                        <Input style="width:250px" v-model:value="formState.pureSalesinput" placeholder="请输入金额/数量" ></Input>
                                    </div>
                                </div>

                                

                                <Form.Item 
                                    label="签订时间"
                                    name="agreedCustomers"
                                >
                                    <div class="agreedCustomers-select">
                                        <Input style="width:250px" v-model:value="formState.agreedCustomers" placeholder="请输入签订时间" ></Input>
                                    </div>
                                    
                                </Form.Item>
                        
                            </div>
                    </Form>


                   
                
                </div>

                <div class="onecotent-bottom">
                    <Table :columns="columns" :data-source="data" :pagination="false">
                    </Table>
                
                </div>
            </div>
            <div class="twocontent">
                <Divider dashed>
                    <div class="num-wrap">
                        <div class="dividernum">
                            2
                        </div>
                        <span>产品政策</span>
                    </div>
                </Divider>
                <div class="twocontent-title">
                    <Button style="margin-right:20px" type="primary">添加产品</Button>
                    <div style="margin-right:20px">购进总指标（万元）：<span>¥152.65</span></div>
                    <div style="margin-right:20px">指标按进度分解（万元）：<span>【Q1】¥12.5，</span><span>【Q2】¥12.5，</span><span>【Q3】¥12.5，</span><span>【Q4】¥12.5</span></div>
                    <div style="margin-right:20px">纯销总指标（万元）：¥152.65</div>
                    
                
                
                </div>
                <div class="table-wrap">
                    <div class="table-title">
                        <div style="display:flex;">
                            <Form.Item 
                                style="maring-right:5px;"
                                label="产品"
                                name="project"
                            >
                                <div class="agreedCustomers-select">
                                    <Select v-model:value="formState.agreedCustomers"
                                    :options="options"
                                    style="width: 100px;margin-right: 20px;"
                                    @change="handleChange">
                                    
                                    </Select>
                                    <span style="margin-right:8px">美复胶丸</span><span>24粒/盒</span>
                                
                                </div>
                                
                            </Form.Item>
                            <div class="rangpicker-wrap">
                                <Form.Item 
                                    style="maring-right:5px;"
                                    label="协议效期"
                                    name="rangepicker"
                                >
                                    <RangePicker v-model:value="rangePicker.value">
                                    </RangePicker>
                                </Form.Item>
                                
                            </div>
                            <Button danger style="position: absolute;right:10px">删除</Button>
                        </div>
                    </div>
                    <!--        rowKey={record => record.id}                  -->
                    <Table 
                        :columns="topColumn" 
                        bordered="true"
                        :data-source="topDataSource"
                        :pagination="false"
                        rowClassName="topRowClass"
                        >

                        <template #bodyCell="{record,  column}">
                            <div>
                                <!-- {{ text }} --{{ record }} --{{ index }} --{{ column }} -->
                                <Input v-if="column.dataIndex == 'agreementPrice'" v-model:value="record.agreementPrice" placeholder="请输入" :maxlength="20"/>
                                <Input v-if="column.dataIndex == 'ticketPassbook'" v-model:value="record.ticketPassbook" placeholder="请输入" :maxlength="20"/>
                                <Input v-if="column.dataIndex == 'bigPurchaseIndex'" v-model:value="record.bigPurchaseIndex" placeholder="请输入" :maxlength="20"/>
                                <Input v-if="column.dataIndex == 'littilePurchaseIndex'" v-model:value="record.littilePurchaseIndex" placeholder="请输入" :maxlength="20"/>
                                <Input v-if="column.dataIndex == 'purchaseMoney'" v-model:value="record.purchaseMoney" placeholder="请输入" :maxlength="20"/>
                                <Input v-if="column.dataIndex == 'pureSalesIndexQuantity'" v-model:value="record.pureSalesIndexQuantity" placeholder="请输入" :maxlength="20"/>
                                <Input v-if="column.dataIndex == 'pureSalesIndicatorMoney'" v-model:value="record.pureSalesIndicatorMoney" placeholder="请输入" :maxlength="20"/>
                            </div>
                        </template>
                    </Table>

                    <Table 
                        :columns="bottomColumn" 
                        bordered="true"
                        :data-source="bottomDataSource"
                        :pagination="false"
                        rowClassName="topRowClass"
                        >

                        <template #bodyCell="{record,  column}">
                            <div>
                                <!-- {{ text }} --{{ record }} --{{ index }} --{{ column }} -->
                                <Input v-if="column.dataIndex == 'agreementPrice'" v-model:value="record.agreementPrice" placeholder="请输入" :maxlength="20"/>

                                <!-- <Input v-if="column.dataIndex == 'ticketPassbook'" v-model:value="record.ticketPassbook" placeholder="请输入" :maxlength="20"/> -->
                                <Select v-if="column.dataIndex == 'ticketPassbook'" v-model:value="record.ticketPassbook"
                                    :options="options"
                                    @change="handleChange">
                                </Select>
                                <Input v-if="column.dataIndex == 'bigPurchaseIndex'" v-model:value="record.bigPurchaseIndex" placeholder="请输入" :maxlength="20"/>
                                <!-- <Input v-if="column.dataIndex == 'littilePurchaseIndex'" v-model:value="record.littilePurchaseIndex" placeholder="请输入" :maxlength="20"/> -->
                                <Select v-if="column.dataIndex == 'littilePurchaseIndex'" v-model:value="record.littilePurchaseIndex"
                                    :options="options"
                                    @change="handleChange">
                                </Select>

                                <Input v-if="column.dataIndex == 'purchaseMoney'" v-model:value="record.purchaseMoney" placeholder="请输入" :maxlength="20"/>
                                <Input v-if="column.dataIndex == 'pureSalesIndexQuantity'" v-model:value="record.pureSalesIndexQuantity" placeholder="请输入" :maxlength="20"/>
                                <!-- <Input v-if="column.dataIndex == 'pureSalesIndicatorMoney'" v-model:value="record.pureSalesIndicatorMoney" placeholder="请输入" :maxlength="20"/> -->
                                <DatePicker v-if="column.dataIndex == 'pureSalesIndicatorMoney'" v-model:value="rangePicker.value"></DatePicker>
                                <!-- <Input v-if="column.dataIndex == 'eight'" v-model:value="record.eight" placeholder="请输入" :maxlength="20"/> -->
                                <DatePicker v-if="column.dataIndex == 'eight'" v-model:value="rangePicker.value"></DatePicker>
                            </div>
                        </template>
                    </Table>
                </div>
            </div> 
            <div class="threecontent">
                <Divider dashed>
                    <div class="num-wrap">
                        <div class="dividernum">
                            3
                        </div>
                        <span>补充协议</span>
                    </div>
                </Divider>
                <div class="textarea-wrap">
                    <div class="textarea-title">
                        <div class="textarea-left">
                            <span :class=" classIndex == index ? 'color1891FC' : '' "  @click="clickNav(index)" v-for="(item,index) in textareaList" :key="item.num">{{  item.text}}</span>
                        </div>
                        <Button type="primary" style="margin-bottom:10px">新增</Button>
                    </div>
                    <div class=" textarea-content">
                        <div class="content-top">
                            <div>协议内容：  </div>
                            <Button size="small" danger>删除</Button>
                        </div>
                        <Textarea @change="textareaChange" v-model:value="textareaValue" placeholder="请输入协议" :rows="4"></Textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</template>
<script setup>
import {reactive,ref} from "vue"
import { Breadcrumb,Form,Select,Input,Table,Button,RangePicker,DatePicker,Textarea} from "ant-design-vue"
import { Divider} from "ant-design-vue"

let textareaList = reactive([
    {
        num:1,
        text:"补充协议1",
        value:""
    },
    {
        num:2,
        text:"补充协议2",
        value:""

    },
    {
        num:3,
        text:"补充协议3",
        value:""


    }
])
let textareaValue = ref("")

const textareaChange = () => {
    textareaList[classIndex.value].value = textareaValue.value
}
let classIndex = ref(0)
const clickNav = (index) => {
    classIndex.value = index
    textareaValue.value = textareaList[index].value
}

const formState = reactive({
  agreedCustomers: '',
  purchase: '',
  purchaseinput:"",
  salesArea:"",
  salesAreainput:"",
  channels:"",
  channelsinput:"",
  agreedState:"",
  pureSales:"",
  pureSalesinput:"",



//   remember: true,
});
const rangePicker = ref({})
const onFinish = values => {
  console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};





const options = ref(
    [{
        value: 'jack',
        label: 'Jack',
    }, {
        value: 'lucy',
        label: 'Lucy',
    }]
)
// const value = ref(['lucy']);

const handleChange = value => {
  console.log(`selected ${value}`);
};




const columns = [
    {
  title: '指定渠道编码',
  dataIndex: 'name',
  key: 'name',
}, {
  title: '指定渠道名称',
  dataIndex: 'age',
  key: 'age',
}, {
  title: '所在省',
  dataIndex: 'address',
  key: 'address 1',
  ellipsis: true,
}];

const data = [{
  key: '1',
  name: 'BJ001',
  age: "宁波有限公司",
  address: '宁波',
}, {
  key: '2',
  name: 'BJ002',
  age: "上海有限公司",
  address: '上海',
}, {
  key: '3',
  name: 'BJ003',
  age: "深圳有限公司",
  address: '深圳',
}];



let topDataSource = [
    {
        agreementPrice:"1",
        ticketPassbook:"2",
        bigPurchaseIndex:"3",
        littilePurchaseIndex:"4",
        purchaseMoney:"5",
        pureSalesIndexQuantity:"6",
        pureSalesIndicatorMoney:"7",

    }
]
let topColumn = [
    {
        title: "协议价（元）",
        dataIndex: 'agreementPrice',
        key: 'agreementPrice',
        className: 'colunm-order_num',
    },
    {
        title: "票折（元）",
        dataIndex: 'ticketPassbook',
        key: 'ticketPassbook',
    },
    {
        title: "购进指标量（大单位）",
        dataIndex: 'bigPurchaseIndex',
        key: 'bigPurchaseIndex',
    },
    {
        title: "购进指标量（小单位）",
        dataIndex: 'littilePurchaseIndex',
        key: 'littilePurchaseIndex',
    },
    {
        title: "购进金额（万元）",
        dataIndex: 'purchaseMoney',
        key: 'purchaseMoney',
    },
    {
        title: "纯销指标量（小单位）",
        dataIndex: 'pureSalesIndexQuantity',
        key: 'pureSalesIndexQuantity',
    },
    {
        title: "纯销指标金额（万元）",
        dataIndex: 'pureSalesIndicatorMoney',
        key: 'pureSalesIndicatorMoney',
    },
]









let bottomColumn = [
    {
        title: "协议价（元）",
        dataIndex: 'agreementPrice',
        key: 'agreementPrice',
    },
    {
        title: "费用科目（元） ",
        dataIndex: 'ticketPassbook',
        key: 'ticketPassbook',
    },
    {
        title: "费用科目（元）",
        dataIndex: 'bigPurchaseIndex',
        key: 'bigPurchaseIndex',
    },
    {
        title: "费用科目（元）",
        dataIndex: 'littilePurchaseIndex',
        key: 'littilePurchaseIndex',
    },
    {
        title: "自定义5",
        dataIndex: 'purchaseMoney',
        key: 'purchaseMoney',
    },
    {
        title: "自定义6",
        dataIndex: 'pureSalesIndexQuantity',
        key: 'pureSalesIndexQuantity',
    },
    {
        title: "自定义7",
        dataIndex: 'pureSalesIndicatorMoney',
        key: 'pureSalesIndicatorMoney',
    },
    {
        title: "自定义8",
        dataIndex: 'eight',
        key: 'eight',
    },
]
let bottomDataSource = [
    {
        agreementPrice:"1",
        ticketPassbook:"2",
        bigPurchaseIndex:"3",
        littilePurchaseIndex:"4",
        purchaseMoney:"5",
        pureSalesIndexQuantity:"6",
        pureSalesIndicatorMoney:"7",
        eight:"8"

    }
]


</script>


<style lang="scss" scoped>
    .nav-wrap {
        display: flex;
        flex-direction: column;
        padding: 20px 40px;
        .bottomnav {
            margin-top: 8px;
            font-size: 20px;
        }
    }


    .content-wrap {
        display: flex;
        flex-direction: column;
        padding: 0px 20px 40px;
        box-sizing: border-box;
        background-color: #F5F5F5;
        width: 100%;
        height: 100%;
    }
    .onecontent, .twocontent, .threecontent {
        width: 100%;
        background-color: #F5F5F5;
        
    }

    .num-wrap {
        display: flex;
        align-items: center;
    }
    .dividernum {
        margin-right: 10px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        background-color: #1677ff;
        border-color: #1677ff;
        text-align: center;
        border-radius: 32px;
        border: 1px solid transparent;
        color: #fff;
    }

    .onecotent-middle {
        display: flex;
        padding-top: 15px;
        background-color: #fff;
        width: 100%;
        .ant-form {
            display: flex;
        }
    }
    .oneleft, .oneright {
        display: flex;
        flex-direction: column;
        width: 50%;
        height: 100%;
    }
    .agreedCustomers-select {
        display: flex;
        align-items: center;
        span {
            font-size: 12px;
        }
    }
    .onecotent-bottom {
        padding:  20px 80px;
        background-color: #fff;
    }
    .formitem-wrap {
        position: relative;
        // display: flex;
        // padding-left: 50px;
        .formitem-absolute {
            position: absolute;
            top: 1px;
            left: 210px;
        }
    }
    .twocontent-title {
        display: flex;
        align-items: center;
        font-size: 12px;
        margin-bottom:10px;
    }
    .table-title{
        display: flex;
        border-bottom: 1px solid #ccc;
        padding-left: 40px;
        widows: 100%;
        position: relative;
    }
    .table-wrap {
        padding-top: 20px;
        background-color: #fff;
        border-radius: 5px;
        
    }
    
    .rangpicker-wrap {
        margin-left: 50px;
    }
    .topRowClass .ant-select {
        width: 100%;
    }
    .textarea-title {
        display: flex;
        justify-content: space-between;
        .textarea-left {
            display: flex;
            border: 1px solid #ccc;
            border-top-left-radius: 5px ;
            border-top-right-radius: 5px ;
            color: #8C8C8C;
            background-color: #fff;
            span {
                display: flex;
                align-items: center;
                padding: 5px 10px;
                &:not(:last-child) {
                    border-right: 1px solid #ccc;
                }
            }
        }
    }
    .textarea-content {
        padding: 10px 5px 40px 20px;
        background-color: #fff;
        .content-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
    }
    .color1891FC {
        color: #1891FC;
        font-weight: 900;
    }
    
</style>